<template>
  <div class="chatWindow">
    <div class="chatHeader" @click='hideleavingMsg'>
      <div class="imGbox">
        <img :src="toUser.userLogo" alt="">
      </div>
      <div class="introName">
        <h3 v-html='toUser.userName'></h3>
      </div>
      <div class="toolBar">
        <a href="javascript:;" v-if='voiceStatus' @click='closeVoice' class='voiceon'></a>
        <a href="javascript:;" v-if='!voiceStatus' @click='openVoice' class='voiceclose'></a>
        <a href="javascript:;" class='close' @click='closeWindow'></a>
      </div>
    </div>

    <div class="contentBOX">
      <div id='content' class="contenBox" @click='closeEmoji'>
         <p class='moreLoad'  @click='hasHistroy' v-show='loading' v-text="more"></p>
         <p class='moreLoad' v-show='loadingOn'>加载中...</p>
         <p v-show='Loaded'>无更多数据</p>
        <div
          @click='hideleavingMsg'
          v-for='(item,index) in messages'
          :class="item.fromUser.userId === userId ? 'mind' : ''"
          :key="index">
          <p v-if="item.type.value !=='event'" class='time' v-html="timetamp(item.timestamp)"></p>
          <p v-if="item.type.value ==='event'" class='time' v-text="item.content"></p>

          <!-- <div class='content' v-html="emoji(item.content)"></div> -->
          <div class="content" v-if="item.type.value !=='event'">
              <p v-if="item.type.value === 'txt' || item.type.value === 'chat'"  v-html="emoji(item.content)"></p>
              <img v-image-preview  class='image' v-if="item.type.value === 'image'" :src="item.content" alt="">
              <video v-if="item.type.value === 'video'" :src="item.content" controls="controls"></video>
              <audio v-if="item.type.value === 'audio'" :src="item.content"></audio>

              <div class='questionBox' v-if="item.type.value === 'question'">
                  <p>您问的是否是以下问题，点击或回复即可得到对应问题的答案：</p>
                  <a  class='question' @click='getanswer(index+1,i.answer)' v-for='(i,index) in item.content' :key='index+1'>
                    {{(index+1)+'. '+i.question}}
                  </a>
              </div>

          </div>

        </div>

        <p class='noOn' v-show='noline'>{{NoOnline}}你可以 <b href="javascript:;" @click='openLeaving'>留言</b></p>
      </div>

      <!-- 页脚输入框 -->
      <div class="footerBOX">

        <div class="footer">
          <div class="toolBar">
            <a href="javascript:;" class='emoji' v-if='!toolBaricon' @click='openqqface'></a>
            <a href="javascript:;" class='star' @click='open()'></a>
            <a href="javascript:;" class='email' @click='openLeaving()'></a>
            <!-- <a href="javascript:;" class='iframe' v-show='!toolBaricon'></a> -->
            <a href="javascript:;" class='image' v-if='!toolBaricon'>
              <input id='file' type="file" @change="updatePhoto" accept="image/*">
            </a>
            <a href="javascript:;" class='video' v-if='!toolBaricon'>
              <input id='video' type="file" @change="updateVideo" accept="video/*">
            </a>
            <a href="javascript:;" class='audio' v-if='!toolBaricon'>
              <input id='audio' type="file" @change="updateAudio" accept="audio/*">
            </a>
            <a href="javascript:;" class='transfer' @click='toHuman' v-if='toolBaricon'>转人工服务</a>
          </div>

          <div class="inputTexarea">
            <textarea v-model="message" @keyup.enter="hasContent()"></textarea>
            <div class="submit">
              <a href="javascript:;" @click='hasContent'>发送</a>
            </div>
          </div>

          <!-- qq表情 -->
          <div class="qqFace" v-if='!qqfaceshow'>

            <vue-emoji
              @select="selectEmoji">
            </vue-emoji>

          </div>


        </div>
        <div class="footerOver">
          <div class="footeroff">
            <a href="javascript:;" @click='open()'>
              <img src="../assets/toolbar/icon_love.png" alt="">
              <h3>满意度</h3>
            </a>
            <a href="javascript:;" @click='reload'>
              <img src="../assets/message.png" alt="">
              <h3>继续会话</h3>
            </a>
            <a href="javascript:;" @click='openLeaving()'>
              <img src="../assets/toolbar/e-mail.png" alt="">
              <h3>留言</h3>
            </a>
          </div>
        </div>


      </div>
    </div>


    <i class='Upfold' @click='Upfold'></i>
    <ateving ref='ateving' :adData='adData'></ateving>
    <score ref='score'></score>
    <leavingMsg ref='leavingMsg'></leavingMsg>
    <audio id='audio01' :src="audioSrc"></audio>
  </div>
</template>

<script>
import chat from "../libs/chat";
import leavingMsgLib from "../libs/leavingMsg";
import keyword from "../libs/keyword";
import score from "./score";
import leavingMsg from "./leavingMsg";
import vueEmoji from "./emoji";
import EasyUpload from "../libs/EasyUpload";
import ateving from "./ateving";
import VueDirectiveImagePreviewer from "vue-directive-image-previewer/dist";
import imagePreviewer from "vue-directive-image-previewer/src/imagePreviewer.vue";

export default {
  name: "home",
  data() {
    return {
      toolBaricon: true,
      qqfaceshow: true,
      loading: true,
      page: 1,
      limit: 15,
      userId: "",
      Loaded: false,
      voiceStatus: true,
      loadingOn: false,
      audioStatus: true,
      audioSrc: require("../assets/audio/dingdong.wav"),
      more: "点击加载历史记录",
      message: "", //textarea 的值
      Name: "", //默认的名字
      ShutdownMessage: "",
      defaultImg: "", //默认的头像
      messages: [], //聊天的信息
      noline: false,
      timer: null,
      pluginToken: "",
      timer2: null,
      NoOnline: "", //暂无人工服务的提示语句
      toUser: {
        userId: "",
        userName: "",
        userLogo: ""
      },
      page: 1,
      limit: 20,
      second: "",
      timeOutSecond: "",
      timeOutMsg: "",
      originSecond: 300,
      origintimeOutSecond: 150,
      questionInfor: "", //问题消息
      robotQuestion: "",
      contentKeyword:'',
      adData:'',   //广告信息
    };
  },

  methods: {

    //关键字列表
     handleKeyword() {
      keyword.getKeyWord(this.pluginToken,res => {
        if (res.code === 200) {
          this.contentKeyword = res.data;
        } else {
          alert(res.error);
        }
      });
    },

    //检索输入的值中是否有关键字
    hasIsthere() {
      if(this.message !== '' && this.contentKeyword.length > 0){
        let a = this.contentKeyword.join('|');
        console.log(a);
        let reg = new RegExp(a);
        if(reg.test(this.message)){
          alert('您输入的内容含有非法内容,请文明聊天');
        } else {
          return true;
        }
      }else{
        return true;
      }
    },



    //关闭声音
    closeVoice() {
      if (this.voiceStatus) {
        this.audioStatus = !this.voiceStatus;
      }
      this.voiceStatus = false;
    },

    //打开声音
    openVoice() {
      if (!this.voiceStatus) {
        this.audioStatus = true;
      }
      this.voiceStatus = true;
    },

    //关闭当前页面
    closeWindow() {
      window.location.href = "about:blank";
      window.close();
    },
    //继续会话，重新刷新页面
    reload() {
      window.location.reload();
    },

    //将时间戳转换为时间
    timetamp(timestamp) {
      return chat.formatDate(timestamp, "yyyy-MM-dd hh:mm:ss");
    },

    //关闭表情
    closeEmoji() {
      this.qqfaceshow = true;
    },

    //加载历史记录
    hasHistroy() {
      let _self = this;
      let myUserId = chat.my().userId;

      let time = this.messages[0].fromUser.userId;
      console.log(2, this.messages);
      console.log(myUserId);
      _self.loadingOn = true;
      _self.loading = false;
      setTimeout(() => {
        chat.history(myUserId, this.page, this.limit, time, "", function(res) {
          let data = res.data;
          if (res.code === 200) {
            if (res.data.length > 0) {
              for (let i = 0; i < data.length; i++) {
                _self.messages.unshift(data[i]);
              }
              _self.loadingOn = false;
              _self.loading = true;
              _self.Loaded = false;
            } else {
              _self.loadingOn = false;
              _self.Loaded = true;
            }
          } else {
            alert(res.error);
          }

          // console.log(_self.messages[0].timestamp);
        });
      }, 1500);
    },

    updatePhoto() {
      //上传图片

      let _self = this;
      EasyUpload.init(
        process.env.API_URL + "/home/upload/add",
        {},
        "file",
        "file",
        function(data) {
          if(data.code === 200){
              let imgPath = data.data;
              _self.messages.push({
                Onside: true,
                content: imgPath,
                type: {
                  value: "image"
                },
                fromUser: {
                  userId: chat.my().userId,
                  name: chat.my().userName,
                  logo: chat.my().userLogo
                },

                timestamp: Math.round(new Date().getTime() / 1000).toString()
              });
              console.log(_self.messages);
              chat.sendMessage(
                imgPath,
                chat.cs().userId,
                "image",
                "none",
                _self.toUser.cvaId
              );
              _self.autoScroll();
          }else{
            alert(data.error);
          }
        },
        function(e) {
          console.log(e);
        }
      );

      EasyUpload.upload();
    },
    updateVideo() {
      //上传视频
      let _self = this;
      EasyUpload.init(
        process.env.API_URL + "/home/upload/add",
        {},
        "file",
        "video",
        function(data) {
          if(data.code === 200){
              let imgPath = data.data;
              _self.messages.push({
                Onside: true,
                content: imgPath,
                type: {
                  value: "video"
                },
                fromUser: {
                  userId: chat.my().userId,
                  name: chat.my().userName,
                  logo: chat.my().userLogo
                },

                timestamp: Math.round(new Date().getTime() / 1000).toString()
              });

              chat.sendMessage(
                imgPath,
                chat.cs().userId,
                "video",
                "none",
                _self.toUser.cvaId
              );
              _self.autoScroll();
          }else{
            alert(data.error);
          }
        },
        function(e) {
          console.log(e);
        }
      );

      EasyUpload.upload();
    },
    updateAudio() {
      //上传音频
      let _self = this;
      EasyUpload.init(
        process.env.API_URL + "/home/upload/add",
        {},
        "file",
        "audio",
        function(data) {
          if(data.code === 200){
            let imgPath = data.data;
            _self.messages.push({
              Onside: true,
              content: imgPath,
              type: {
                value: "audio"
              },
              fromUser: {
                userId: chat.my().userId,
                name: chat.my().userName,
                logo: chat.my().userLogo
              },

              timestamp: Math.round(new Date().getTime() / 1000).toString()
            });

            chat.sendMessage(
              imgPath,
              chat.cs().userId,
              "audio",
              "none",
              _self.toUser.cvaId
            );
            _self.autoScroll();
          }else{
            alert(data.error);
          }
        },
        function(e) {
          console.log(e);
        }
      );

      EasyUpload.upload();
    },
    selectEmoji(code) {
      this.qqfaceshow = !this.qqfaceshow;
      this.message += code;
    },

    //  设置浏览器聊天窗口通知
    // getNotifitionTitle(isShine){
    //    let titleInit = document.title
    //   setInterval(function() {
    //       var title = document.title;
    //       if (true) {
    //           if (/新/.test(title) == false)
    //               document.title = '【你有新消息】';

    //       } else {
    //           document.title = titleInit;
    //       }
    //   }, 500);
    // },
    //默认请求机器人
    requestRobot(pushRobotMessage) {
      this.userId = chat.my().userId;
      let data = chat.agent().greetingSettings,
        robotContent,
        notifyMessage,
        messageOn;
      let _self = this;
      for (let i = 0; i < data.length; i++) {
        if (data[i].greetingType.value === "desktop") {
          _self.second = data[i].customerShutdownSetting.seconds; //得到系统自动结束本次会话的时间300秒
          _self.ShutdownMessage = data[i].customerShutdownSetting.message; //得到300秒的会话
          _self.timeOutSecond = data[i].customerTimeoutSetting.seconds; //  得到150秒
          _self.timeOutMsg = data[i].customerTimeoutSetting.message; //  得到150秒的会话
          robotContent = data[i].robot; //得到机器人自动回复
          messageOn = data[i].notifyMessageOn;
          if (messageOn) {
            notifyMessage = data[i].notifyMessage; //得到通告的第一句
          }

          break;
        }
      }
      if (pushRobotMessage) {
        if (messageOn) {
          _self.messages.push({
            Onside: false,
            type: {
              value: "txt"
            },
            content: notifyMessage,
            fromUser: {
              userId: chat.agent().robot.userId,
              name: chat.agent().robot.name,
              logo: chat.agent().robot.logo
            },
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
        }

        _self.messages.push({
          Onside: false,
          type: {
            value: "txt"
          },
          content: robotContent,
          fromUser: {
            userId: chat.agent().robot.userId,
            name: chat.agent().robot.name,
            logo: chat.agent().robot.logo
          },
          timestamp: Math.round(new Date().getTime() / 1000).toString()
        });
        this.toUser.userLogo = chat.agent().robot.logo;
        this.toUser.userName = chat.agent().robot.name;
        this.toUser.userId = chat.agent().robot.userId;
      } else {
        this.toUser.userLogo = chat.cs().logo;
        this.toUser.userName = chat.cs().name;
        this.toUser.userId = chat.cs().userId;
      }
    },
    //设置铃声
    startAudio() {
      let audio = document.getElementById("audio01");
      if (this.audioStatus) {
        audio.play();
      }
    },

    //倒计时300秒的方法
    countDown() {
      let _self = this;
      this.timer = setInterval(function() {
        if (_self.second >= 0) {
          _self.second--;
        } else {
          clearInterval(_self.timer);
          // console.log(time);
          _self.messages.push({
            Onside: false,
            type: {
              value: "txt"
            },
            content: _self.ShutdownMessage,
            fromUser: {
              userId: chat.agent().robot.userId,
              name: chat.agent().robot.name,
              logo: chat.agent().robot.logo
            },

            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          chat.closeCva();
          chat.close();
          _self.autoScroll();
          $(".footer").css("display", "none");
          $(".footerOver").css("display", "block");
        }
      }, 1000);
    },
    //倒计时150秒的方法
    countDown2() {
      let _self = this;

      this.timer2 = setInterval(function() {
        if (_self.timeOutSecond >= 0) {
          _self.timeOutSecond--;
        } else {
          clearInterval(_self.timer2);
          //console.log(time);
          _self.messages.push({
            Onside: false,
            type: {
              value: "txt"
            },
            content: _self.timeOutMsg,
            fromUser: {
              userId: chat.agent().robot.userId,
              name: chat.agent().robot.name,
              logo: chat.agent().robot.logo
            },
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          _self.autoScroll();
        }
      }, 1000);
    },

    //我发送信息到聊天框
    hasContent() {
      let _self = this;
      if (_self.message.length !== 1) {
        if(this.hasIsthere()){
        let result = this.getQuestion(_self.message);
        _self.messages.push({
          Onside: true,
          type: {
            value: "txt"
          },
          content: _self.message,
          fromUser: {
            userId: chat.my().userId,
            name: chat.my().userName,
            logo: chat.my().userLogo
          },
          timestamp: Math.round(new Date().getTime() / 1000).toString()
        });

        if (result) {
          _self.messages.push({
            Onside: false,
            type: {
              value: "txt"
            },
            content: result,
            fromUser: {
              userId: _self.robotQuestion.userId,
              name: _self.robotQuestion.name,
              logo: _self.robotQuestion.logo
            },
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
        } else {
          if (chat.cs()) {
            chat.sendMessage(
              _self.message,
              chat.cs().userId,
              "txt",
              "none",
              this.toUser.cvaId
            );
          } else {
            chat.chatToRobot(this.message, function(res) {
              let data = res.data;

              if (data.type.value === "question") {
                _self.robotQuestion = data.fromUser;
                _self.questionInfor = JSON.parse(data.content);

                _self.messages.push({
                  Onside: false,
                  type: {
                    value: data.type.value
                  },
                  content: _self.questionInfor,
                  fromUser: {
                    userId: data.fromUser.userId,
                    name: data.fromUser.name,
                    logo: data.fromUser.logo
                  },
                  timestamp: Math.round(new Date().getTime() / 1000).toString()
                });
              } else {
                _self.messages.push({
                  Onside: false,
                  type: {
                    value: data.type.value
                  },
                  content: data.content,
                  fromUser: {
                    userId: data.fromUser.userId,
                    name: data.fromUser.name,
                    logo: data.fromUser.logo
                  },
                  timestamp: Math.round(new Date().getTime() / 1000).toString()
                });
              }
              _self.autoScroll();
            });
          }
        }

        this.resetTime();
        _self.message = "";
        _self.autoScroll();
        }
      }
    },

    //输入问题序号得到相应的答案
    getQuestion(message) {
      let _self = this;
      if (this.questionInfor === "") {
        return false;
      } else {
        for (let ques = 0; ques < _self.questionInfor.length; ques++) {
          if (Number(message) - 1 === ques) {
            return _self.questionInfor[ques].answer;
          }
        }
      }
      return false;
    },

    //重置方法
    resetTime() {
      this.second = this.originSecond;
      this.timeOutSecond = this.origintimeOutSecond;
    },

    autoScroll() {
      setTimeout(() => {
        let content = document.getElementById("content");
        content.scrollTop = content.scrollHeight - content.clientHeight;
      }, 20);
    },

    toHuman() {
      chat.connectToHuman(json => {
        if (json.status) {
          this.noline = false;
          this.closeRedirectHuman(false);
          this.toUser = {
            userId: chat.cs().userId,
            userName: chat.cs().name,
            userLogo: chat.cs().logo
          };
        } else {
          this.noline = true;
          this.closeRedirectHuman(true);
          this.NoOnline = json.message;
          this.autoScroll();
        }
      });
    },
    closeRedirectHuman(open) {
      this.service = open;
      //this.noline = open;
      this.toolBaricon = open;
    },
    openqqface() {
      this.qqfaceshow = !this.qqfaceshow;
    },
    open() {
      this.$refs.score.openEvalute();
      this.$refs.score.getEvaluteServer(this.pluginToken);
    },
    openLeaving() {
      this.$refs.leavingMsg.hasMsg(this.pluginToken);
    },
    hideleavingMsg() {
      this.$refs.leavingMsg.closeLeaving();
    },
    //根据相应问题得到回复
    getanswer(index, answer) {
      // let _self = this;
      this.messages.push({
        Onside: true,
        type: {
          value: "txt"
        },
        content: "" + index,
        fromUser: {
          userId: chat.my().userId,
          name: chat.my().userName,
          logo: chat.my().userLogo
        },
        timestamp: Math.round(new Date().getTime() / 1000).toString()
      });
      this.messages.push({
        Onside: false,
        type: {
          value: "txt"
        },
        content: answer,
        fromUser: {
          userId: this.robotQuestion.userId,
          name: this.robotQuestion.name,
          logo: this.robotQuestion.logo
        },
        timestamp: Math.round(new Date().getTime() / 1000).toString()
      });
      this.autoScroll();
    },
    handleChatMessage(data) {
      this.messages.push({
        Onside: false,
        content: data.content,
        type: {
          value: data.type.value
        },
        fromUser: {
          userId: data.fromUser.userId,
          name: data.fromUser.name,
          logo: data.fromUser.logo
        },
        timestamp: Math.round(new Date().getTime() / 1000).toString()
      });
      this.startAudio();
      this.autoScroll();
    },
    handleEventMessage(data) {
      switch (data.event.value) {
        case "none":
          break;
        case "compose":
          break;
        case "received":
          break;
        case "human":
          break;
        case "redirect":
        case "beTake":
          chat.setCs(data.fromUser);
          this.toUser.userLogo = chat.cs().logo;
          this.toUser.userName = chat.cs().name;
          this.toUser.userId = chat.cs().userId;
          this.noline = false;
          this.closeRedirectHuman(false);
          break;
        case "online":
          break;
        case "offline":
          break;
        case "leave":
          break;
        case "busy":
          break;
        case "send":
          break;
        case "history":
          let messages = JSON.parse(data.content);
          for (let i = 0; i < messages.length; i++) {
            let mine = chat.my().userId === messages[i].from;
            this.messages.unshift({
              Onside: mine,
              content: messages[i].content,
              type: {
                value: messages[i].type
              },
              fromUser: {
                userId: mine ? chat.my().userId : messages[i].fromUser.userId,
                name: mine ? chat.my().userName : messages[i].fromUser.name,
                logo: mine ? chat.my().userLogo : messages[i].fromUser.logo
              },
              timestamp: Math.round(new Date().getTime() / 1000).toString()
            });
          }
          console.log(1);
          this.autoScroll();
          break;
        case "illegal":
          break;
      }
    },

    //判断是否启用广告
    judgment(){
        leavingMsgLib.getbannerRead(this.pluginToken,res => {
        if (res.code === 200) {
          if(res.data.enable === 1){
            $(".Upfold").css('display','block');
            console.log(res.data);
            this.adData = res.data;
          }else{
            $(".Upfold").css('display','none');
          }
        } else {
          alert(res.error);
        }
      });
    },

    //打开右侧的广告
    Upfold() {
        $(".Upfold").toggleClass("rightAdd");
        $(".contentBOX").toggleClass("newContentWidth");
        this.$refs.ateving.changeBanner();
    }
  },
  components: {
    score,
    leavingMsg,
    vueEmoji,
    ateving,
    imagePreviewer
  },
  mounted() {
    //动态设置高度
    let height = $(window).height();
    $(".contenBox").css("height", height - 400);

    $(window).resize(() => {
      height = $(window).height();
      $(".contenBox").css("height", height - 400);
    });

    chat.addValidateListener(json => {
      this.requestRobot(!chat.cs());
      this.closeRedirectHuman(!chat.cs());
      this.countDown();
      this.pluginToken = json.agentToken;
      this.countDown2();
      this.handleKeyword();
      this.judgment();
    });

    chat.addMessageListener(event => {
      let data = JSON.parse(event.data);
      console.log(data);
      if (data.type.value === "event") {
        this.handleEventMessage(data);
      } else {
        this.handleChatMessage(data);
      }
    });
  }
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}

h3,
p {
  margin: 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  /* display: inline-block; */
  margin: 0 10px;
}

a {
  text-decoration: none;
  color: #333;
}

.vue-directive-image-previewer .wrapper {
  z-index: 100;
}

.chatWindow {
  display: block;
  height: 90%;
  width: 70%;
  max-height: 720px;
  max-width: 640px;

  position: relative;
  margin: 0 auto;
  /* margin-left: 0px; */
  /* margin-top: 0px; */
  min-height: 430px;
  min-width: 524px;
  overflow: hidden;
  box-shadow: 0 0 24px 0 rgba(95, 124, 134, 0.18);
}

.chatHeader {
  display: flex;
  padding: 1rem;
  background: #019fdf;
}

.noOn b {
  color: #019fdf;
}

.chatHeader .imGbox {
  width: 40px;
  height: 40px;
}

.chatHeader .imGbox img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.chatHeader .introName h3 {
  color: #fff;
  font-size: 0.9rem;
  margin-top: 0.13rem;
}

.introName {
  width: 502px;
  margin-left: 1rem;
  line-height: 2.34rem;
}

.toolBar {
  display: flex;
}

.toolBar a {
  display: block;
  width: 1rem;
  height: 1rem;
}

.content p .image {
  vertical-align: middle;
  margin-left: 0.2rem;
  width: 9rem;
  padding: 0.5rem;
}

.toolBar .voiceon {
  background: url("../assets/icon/voiceon.png") center center no-repeat;
  background-size: 1rem;
  margin-right: 1rem;
}

.toolBar .voiceclose {
  background: url("../assets/icon/voiceoff.png") center center no-repeat;
  background-size: 1rem;
  margin-right: 1rem;
}

.toolBar .close {
  background: url("../assets/icon/close.png") center center no-repeat;
  background-size: 1rem;
}

.contenBox {
  min-height: 263px;
  max-height: 396px;
  min-width: 308px;
  padding: 0 1rem;
  overflow-y: auto;
}

.contenBox::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.contenBox::-webkit-scrollbar-track-piece {
  background-color: #fff;
} /* 滚动条的内层滑轨背景颜色 */

.contenBox::-webkit-scrollbar-track {
  background-color: #fff;
} /* 滚动条的外层滑轨背景颜色 */

.contenBox::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
} /* 滚动条的内层滑块颜色 */

.contenBox::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
} /* 滑轨两头的监听按钮颜色 */

.contenBox > p {
  text-align: center;
  font-size: 12px;
  color: #b1b6b4;
  cursor: pointer;
  padding: 1rem 0;
}

.contenBox > div {
  width: 100%;
  display: flex;
  text-align: left;
  flex-wrap: wrap;
}

.contenBox > div p {
  width: 100%;
}

.contenBox .name {
  font-size: 12px;
  color: #b6bebf;
}

.contentBOX .content img {
  vertical-align: middle;
  margin-left: 0.2rem;
  width: 9rem;
  padding: 0.5rem;
}

.contenBox .content {
  font-size: 12px;
  color: #333;
  padding: 0.47rem;
  background: #e9eef0;
  max-width: 58%;
  margin: 0.7rem 0;
  border-radius: 3px;
  word-break: break-all;
}

.content a {
  text-decoration: underline;
  color: #62bada;
  cursor: pointer;
  margin: 0.2rem 0;
  display: inline-block;
}

.contenBox div .time {
  text-align: center;
  color: #bbbfbd;
  font-size: 12px;
  margin: 0.6rem 0;
}

.mind {
  flex-direction: row-reverse;
}

.mind .time {
  margin: 1.3rem 0 0 0;
}

.contenBox .mind .name {
  text-align: right;
}

.contenBox .content .question {
  color: #019fdf;
  cursor: pointer;
  text-decoration: none;
  display: inherit;
  margin: 0.4rem 0;
}

.contenBox .mind .content {
  float: right;
  color: #fff;
  background: #059ee0;
}

.footerBOX {
  position: relative;
}

.footerBOX .toolBar {
  display: flex;
  padding: 0.8rem;
}

.footerBOX .toolBar a {
  display: block;
  min-width: 15px;
  height: 14px;
  margin: 0 0.4rem;
}

.footerBOX .toolBar input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 17px;
  height: 16px;
  cursor: pointer;
}

.footerBOX .toolBar .star {
  background: url("../assets/toolbar/icon_love.png") center center no-repeat;
  background-size: 1rem;
  position: relative;
}

.footerBOX .toolBar .email {
  background: url("../assets/toolbar/e-mail.png") center center no-repeat;
  background-size: 0.9rem;
  position: relative;
}

.footerBOX .toolBar .emoji {
  background: url("../assets/toolbar/emoji.png") center center no-repeat;
  background-size: 0.9rem;
  position: relative;
}

.footerBOX .toolBar .image {
  background: url("../assets/toolbar/LC.png") center center no-repeat;
  background-size: 0.87rem;
  position: relative;
}

.footerBOX .toolBar .video {
  background: url("../assets/toolbar/video.png") center center no-repeat;
  background-size: 1rem;
  position: relative;
}

.footerBOX .toolBar .audio {
  background: url("../assets/toolbar/uE700-audio.png") center center no-repeat;
  background-size: 1rem;
  position: relative;
}

.footerBOX .toolBar .file input {
  opacity: 0;
  width: 15px;
  height: 15px;
  left: 0;
  top: 0;
  position: absolute;
}

.footerBOX .toolBar .iframe {
  background: url("../assets/toolbar/cc-frame-expand.png") center center
    no-repeat;
  background-size: 1rem;
}

.footerBOX {
  border-top: 1px solid #eaeaea;
}

.footerBOX .toolBar .transfer {
  display: inline-block;
  width: 35rem;
  font-size: 12px;
  text-align: right;
  color: #059ee0;
  margin-left: 30.7rem;
}

.inputTexarea {
  display: flex;
  padding: 0 1rem;
}

.inputTexarea textarea {
  border: none;
  resize: none;
  outline: none;
  width: 87%;
  height: 5rem;
}

.submit a {
  display: inline-block;
  padding: 0.3rem 0.3rem;
  width: 3rem;
  text-align: center;
  background: #059ee0;
  color: #fff;
  margin: 1.6rem 0 0 1rem;
  font-size: 12px;
}

.qqFace {
  position: absolute;
  max-width: 27rem;
  display: flex;
  bottom: 8rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-shadow: 3px 2px 9px 0 #eaeaea;
  box-shadow: 1px 1px 20px 0 #eaeaea;
  background: #fff;
}

.qqFace .qqIcon {
  width: 24px;
  height: 25px;
  display: block;
  margin: 0.4rem 3.8%;
}

.emoji .emoji-controller {
  margin: 0;
}

.emoji .emoji-controller li {
  width: 5rem;
}

.Upfold {
  display: block;
  width: 1.1rem;
  height: 1.5rem;
  position: absolute;
  background: url(../assets/left.png) center center no-repeat;
  top: 225px;
  right: 0;
  background-size: 1.5rem;
}

.rightAdd {
  right: 35%;
  transform: rotate(180deg);
}

.contentBOX {
  width: 100%;
}

.newContentWidth {
  width: 65%;
}

.footeroff {
  width: 100%;
  display: flex;
  padding: 1rem 0;
}

.footeroff a {
  width: 33.3%;
  text-align: center;
}

.footeroff a h3 {
  font-size: 0.7rem;
  color: #9a9a9a;
  font-weight: 400;
}

.footeroff a img {
  width: 28px;
  margin-top: 0.3rem;
}

.footer {
  display: block;
}

.footerOver {
  display: none;
}
</style>
